/* BASIC TEXT FILE */

/* GOAL: to get up a text-based blogpost asap, with an elegant and traditional look */

* {
  box-sizing: border-box;
}

body {
  font-family: "Source Serif Pro", serif;
  background-color: var(--preamble);
  line-height: 1.5;
  font-size: 1.2em;
  margin: 0;
  padding: 0;
  padding-left: 2vw;
  padding-right: 2vw;
}

article {
  background-color:#fcf9f0;
  max-width: 90ch;
  margin-left: auto;
  margin-right: auto;
  padding-right: 6ch;
  padding-left: 8ch;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.quotechunk {
  padding-bottom: 3em;
  padding-top: 3em;
  padding-left: 1ch;
  padding-right: 1ch;
}

section {
  padding-bottom: 4em;
}


/* TEXT TYPES */

h2, h3, h4, h5, h6 {
  font-family: "Headland One", Times, serif;
  font-weight: normal;
}

header {
    height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    flex-direction: column;
}


header h1  {
  font-size: 3em;
  font-family: 'Macondo Swash Caps', Times, serif;
  text-align: center;
  padding-top: 1em;
}

h2 {
  padding-top: 1em;
  font-size: 2em;
  text-align: center;
}

h3 {
  text-align: center;
  display: block;
  border-bottom: green dotted 5px;
  margin-bottom: 1.5em;
  padding-top: 2em;
}

h4 {
  text-align: center;
  font-variant-caps: small-caps;
  font-weight: bold;
}

img, figure {
  max-width:60ch;
  margin-left: auto;
  margin-right: auto;
 
}



a {
  color: green;
  text-decoration: underline dotted; 
}

/* Lists */


ul {
  list-style-type: '◆ ';
  margin-left: 2em;
  margin-right: 2em;
}

li {
  margin-bottom: 8px;
}

dl {
	max-width:60ch;
	margin-left: auto;
	margin-right: auto;
}


/* FANCY QUOTES */

blockquote p {
  font-family: 'Libre Baskerville';
  font-size: 0.8em;
}

blockquote cite {
  font-weight: bold;
  text-align: right;
  margin-top: 0.5em;
}

blockquote {
  border:none;
}

blockquote:before{
    content: ""; /* This is necessary for the pseudo element to work. */ 
    display: block; /* This will put the pseudo element on its own line. */
    margin: 0 auto; /* This will center the border. */
    margin-top: 4em;
    width: 50%; /* Change this to whatever width you want. */
    margin-bottom: 1em;
    border-bottom: 5px double black; 
}

blockquote:after {
    content: "";
    display: block;
    margin: 0 auto;
    margin-bottom: 4em;
    width: 50%; 
    padding-top: 1em;
    border-bottom: 5px double black; 
}


/* Attractive Quotes */

q::before {
  content: "‘"
}

q::after {
  content: "’"
}

q {
  font-style: italic;
}

  /* Title of a book or film */

q-t, cite, .author {
  font-variant-caps: small-caps;
  font-style: italic;
  text-align: right;
  display: block;
}

.comment cite {
  display: inline;
  text-align: start;
}

.author {
  margin-top: 0;
}
/* Admonitions */

/* from http://boundedinfinity.github.io/2017/09/admonitions-in-css/ */

ad-monition {
  display: block;
  padding: 15px;
  margin-bottom: 21px;
  border-left: 10px solid transparent;
  margin-left: 2em;
  margin-right: 2em;
}

ad-monition h4 {
  margin: 0;
  text-transform: uppercase;
  padding-left: 3px;
  border: 1px solid;
  border-style: hidden hidden solid;
}

ad-monition p {
  padding-left: .75em;
  padding-right: .75em;
  padding-top: 0.5em;
  margin-left: 0;
  border-left: 0;
  border-top: 0;
  min-height: 0;
}

.hint {
  border-color: olive;
  background-color: #f6fffe;
}

.hint h4 {
  color: olive;
  border-color: olive;
}

.note {
  border-color: orangered;
  background-color: #fffeec;
}

.note h4 {
  color: orangered;
  border-color: orangered;
}

/*
.tip {
  border-color: blue;
  background-color: #f6fcff;
}

.tip h4 {
  color: blue;
  border-color: blue;
}


.important {
  border-color: red;
  background-color: #fffbfb;
}

.important h4 {
  color: red;
  border-color: red;
}
*/


/* headland-one-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Headland One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/headland-one-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/headland-one-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/headland-one-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/headland-one-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/headland-one-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/headland-one-v15-latin-regular.svg#HeadlandOne') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/source-serif-pro-v15-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/source-serif-pro-v15-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v15-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v15-latin-regular.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/source-serif-pro-v15-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/source-serif-pro-v15-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v15-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v15-latin-italic.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/source-serif-pro-v15-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/source-serif-pro-v15-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v15-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v15-latin-700.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif Pro';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/source-serif-pro-v15-latin-900.eot'); /* IE9 Compat Modes */
  src: url('../fonts/source-serif-pro-v15-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v15-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v15-latin-900.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* source-serif-pro-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Source Serif Pro';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/source-serif-pro-v15-latin-900italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/source-serif-pro-v15-latin-900italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/source-serif-pro-v15-latin-900italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-900italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/source-serif-pro-v15-latin-900italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/source-serif-pro-v15-latin-900italic.svg#SourceSerifPro') format('svg'); /* Legacy iOS */
}

/* libre-baskerville-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/libre-baskerville-v14-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/libre-baskerville-v14-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-regular.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}

/* libre-baskerville-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Baskerville';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/libre-baskerville-v14-latin-italic.eot'); /* IE9 Compat Modes */
  src: url('../fonts/libre-baskerville-v14-latin-italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-italic.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-italic.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}

/* libre-baskerville-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Libre Baskerville';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/libre-baskerville-v14-latin-700.eot'); /* IE9 Compat Modes */
  src: url('../fonts/libre-baskerville-v14-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/libre-baskerville-v14-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../fonts/libre-baskerville-v14-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/libre-baskerville-v14-latin-700.svg#LibreBaskerville') format('svg'); /* Legacy iOS */
}

/* macondo-swash-caps-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Macondo Swash Caps';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/macondo-swash-caps-v20-latin-regular.eot'); /* IE9 Compat Modes */
  src: url('../fonts/macondo-swash-caps-v20-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../fonts/macondo-swash-caps-v20-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../fonts/macondo-swash-caps-v20-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../fonts/macondo-swash-caps-v20-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../fonts/macondo-swash-caps-v20-latin-regular.svg#MacondoSwashCaps') format('svg'); /* Legacy iOS */
}

/* BACK LINKS */
.divback {

  /*margin-top: 110vh;*/
  position: sticky;
  bottom: 0;
  padding-left: 1ch;
}
/* https://codepen.io/daviddarnes/pen/JjxmLpb?editors=0100 */

.backlink {
  padding: 10px;
  background: white;
}

p {
  text-indent:2em;
}

details {
  cursor: pointer;
}

.comment {
  font-style: italic;
  padding-left: 1em;
}

/*categories*/

:root {
  --solar: rgb(161, 142, 94);
  --lunar: rgb(78, 78, 113);
  --stellar:  rgb(49, 49, 49);
  --solstel: rgb(124, 124, 83);
  --lunstel: rgb(55, 55, 58);
  --sea: rgb(51, 57, 57);
  --landweird: rgb(61, 74, 43);
  --walking: rgb(92, 76, 43);
  --reading: rgb(150, 130, 88);
  --disconnect: rgb(49, 49, 49);
  --sunking: rgb(106, 126, 106);
  --winterking: rgb(108, 87, 77);
  --landmother: rgb(57, 63, 78);
  --winterwitch: rgb(51, 57, 57);
  --harvest: rgb(150, 130, 88);
  --spells: rgb(52, 41, 52);
  --light: rgb(174, 163, 82);
  --keeper: rgb(82, 68, 58);
  --change: rgb(78, 52, 52);
  --witches: rgb(52, 41, 52);
  --fay: rgb(67, 76, 54);
  --unsorted:  rgb(49, 49, 49);
  --preamble: rgb(100, 55, 55);
}

#preamble {
  background-color: var(--preamble);
}

#preamble h3 {
  border-bottom-color: var(--preamble);
}
#Landweird {
  background-color: var(--landweird);
}

#Landweird h3 {
  border-bottom-color:var(--landweird);
}

#TheVillage\&Outside {
  background-color: var(--keeper);
}

#TheVillage\&Outside h3 {
  border-bottom-color: var(--keeper);
}

  #Solar {
  background-color: var(--solar);
}

#Solar h3 {
  border-bottom-color: var(--solar);
}

#Lunar {
  background-color: var(--lunar);
}

#Lunar h3 {
  border-bottom-color: var(--lunar);
}

#Stellar {
  background-color: var(--stellar);
}

#Stellar h3 {
  border-bottom-color: var(--stellar);
}

#SolarStellar {
  background-color: var(--solstel);
}

#SolarStellar h3 {
  border-bottom-color: var(--solstel);
}

#LunarStellar {
  background-color: var(--lunstel);
}

#LunarStellar h3 {
  border-bottom-color: var(--lunstel);
}

#TheSea {
  background-color: var(--sea);
}

#TheSea h3 {
  border-bottom-color: var(--sea);
}

#Walking {
  background-color: var(--walking);
}

#Walking h3 {
  border-bottom-color: var(--walking);
}

#Reading {
  background-color: var(--reading);
}

#Reading h3 {
  border-bottom-color: var(--reading);
}

#Disconnection {
  background-color: var(--disconnect);
}

#Disconnection {
  border-bottom-color: var(--disconnect);
}

#Harvest-Tide {
  background-color: var(--harvest);
}

#Harvest-Tide {
  border-bottom-color: var(--harvest);
}

#Spells\&Craft {
  background-color: var(--spells);
}

#Spells\&Craft h3 {
  border-bottom-color: var(--spells);
}

#SunKing {
  background-color: var(--sunking)
}
#SunKing h3 {
  border-bottom-color: var(--sunking);
}

#WinterKing {
  background-color: var(--winterking);
}

#WinterKing h3 {
  border-bottom-color: var(--winterking);
}

#Landmother {
  background-color:var(--landmother);
}

#Landmother h3 {
  border-bottom-color: var(--landmother); 
}


#WinterWitch {
  background-color: var(--winterwitch);
}

#WinterWitch {
  border-bottom-color: var(--winterwitch);
}

#Lightbringer {
  background-color: var(--light);
}

#Lightbringer h3 {
  border-bottom-color: var(--light);
}

#TheKeeper {
  background-color: var(--keeper);
}

#TheKeeper h3 {
  border-bottom-color: var(--keeper);
}

#Changeling {
  background-color: var(--change);
}

#Changeling h3 {
  border-bottom-color: var(--change);
}

#Witches {
  background-color:var(--witches);
}

#Witches h3 {
  border-bottom-color: var(--witches);
}

#GoodNeighbours {
  background-color: var(--fay);
}

#GoodNeighbours h3 {
  border-bottom-color: var(--fay);
}

#Unsorted {
  background-color: var(--unsorted);
}

#Unsorted h3 {
  border-bottom-color: var(--unsorted);
}